import {AppointedDate} from '@/components/date'
import {Button, View} from '@tarojs/components'
import React from 'react'
import {IconImg, ParamIcon, ParamStatusIcon} from '@/components/images'
import {CItem} from '@/components/item'
import {CItemBox} from '@/components/itemBox'
import {toHome, toHomeParamsHistory} from '@/utils/pageRedirect'
import {uDisBindDev} from '@/api'
import {getStorage} from '@/utils/localstoreage'
import Taro from '@tarojs/taro'
import {
  BarChart,
  EchartLegend
} from '@/pages-echarts/components/echarts/singleDevParamsAnalyze'

export type ParamAnalyze = {
  exceptionRatio: number
  checkDataRatioPackList: Device.ParamDataRatio[]
}

export const ParamAnalyzeCard: React.FC<{
  data?: ParamAnalyze
  onDateRangeChanged?: (date: [string, string]) => void
}> = ({data, onDateRangeChanged}): JSX.Element => {
  return (
    <View className="rounded-12 overflow-hidden">
      {/* 卡片头部突出栏 */}
      <View
        className="h-26 flex items-center justify-between"
        style={{
          background: 'linear-gradient(139deg, #E7F2FA 0%, #F3F5F8 100%)'
        }}
      >
        <View className="h-26 pl-18 pr-4 pt-8 bg-white flex items-center rounded-tr-12 relative">
          <View className="text-14 font-bold mr-4">水质健康</View>
          <View className="text-14 text-danger">
            异常指标{'<'}
            {data?.exceptionRatio}%
          </View>
          <View
            className="absolute -right-12 bottom-0  w-0 h-0"
            style={{
              borderWidth: '20rpx 14rpx',
              borderStyle: 'solid',
              borderLeftColor: '#fff',
              borderTopColor: 'transparent',
              borderRightColor: 'transparent',
              borderBottomColor: '#fff'
            }}
          ></View>
        </View>
        <View className="h-26 pr-16 flex items-center justify-start gap-x-8">
          {/* <IconImg
            imgName="historyRecord"
            style={{
              width: '38rpx',
              height: '38rpx'
            }}
          ></IconImg>
          <View className="hanzi text-12">查看记录</View> */}
        </View>
      </View>
      {/* 图表 日期切换区域 */}
      <View className="p-16 bg-white rounded-r-12">
        <View className="h-32 flex justify-between items-center">
          <View className="h-15 flex">
            <EchartLegend backgroundColor="#1DC79C">正常数据</EchartLegend>
            <EchartLegend backgroundColor="#E580F5">异常数据</EchartLegend>
          </View>
          <AppointedDate
            emuOptions={{day: '日'}}
            dateOptions={['day', 'week']}
            onChange={(s, e) => {
              onDateRangeChanged && onDateRangeChanged([s, e])
            }}
          ></AppointedDate>
        </View>
        <View className="h-215">
          {data?.checkDataRatioPackList ? (
            <BarChart data={data.checkDataRatioPackList}></BarChart>
          ) : (
            <View className="hanzi w-full h-full flex justify-center items-center">
              该时间段内暂无记录
            </View>
          )}
        </View>
      </View>
    </View>
  )
}

/**竖向参数卡片 */
export const ParamCardRow: React.FC<{
  list?: Device.ParamData[]
}> = ({list}): JSX.Element => {
  return (
    <View className="mt-16 grid grid-cols-5 gap-x-13 gap-y-13">
      {list &&
        list.map(item => (
          <View
            className="w-full p-6 rounded-12 flex flex-col justify-around bg-white"
            onClick={() => {}}
          >
            {/* 参数状态 */}
            <View className="w-full h-8 mb-2 flex justify-end items-center">
              <ParamStatusIcon status={item.paramStatus}></ParamStatusIcon>
            </View>
            {/* 参数图标 */}
            <View className="w-full h-24 mb-4 flex">
              <View className="mx-auto">
                <ParamIcon iconName={item.paramName} opacity={0.7}></ParamIcon>
              </View>
            </View>
            {/* 参数名称 以及 单位 */}
            <View className="w-full mb-6 text-10 text-xx_text text-center break-words">
              {item.paramName + (item.paramUnit ? ' ' + item.paramUnit : '')}
            </View>
            {/* 参数数值 */}
            <View className="w-full h-19 mb-4 text-16 font-bold text-center truncate">
              {item.paramValue || <View className="text-12">---</View>}
            </View>
          </View>
        ))}
    </View>
  )
}

/**横向向参数栏 */
export const ParamCardCol: React.FC<{list: Device.ParamData[]}> = ({
  list
}): JSX.Element => {
  return (
    <CItemBox
      style={{
        backgroundColor: '#fff',
        margin: '32rpx 0'
      }}
    >
      {list.map((item, idx) => (
        <CItem>
          <ParamIcon iconName={item.paramName} opacity={0.3}></ParamIcon>
          <View className="inline-block w-60 ml-10 mr-6 text-14 font-bold text-left truncate">
            {item.paramName || '---'}
          </View>
          <View className="inline-block flex-1 text-12 mr-6 text-x_text">{`${
            item.paramValue || '---'
          } ${item.paramUnit || '---'}`}</View>
        </CItem>
      ))}
    </CItemBox>
  )
}

/**历史记录跳转栏 */
export const HistoryRow: React.FC<{
  devId?: string | number
  devName?: string
}> = ({devId, devName}): JSX.Element => {
  return (
    <CItemBox
      style={{
        backgroundColor: '#fff',
        margin: '32rpx 0'
      }}
    >
      <CItem
        onClick={() => {
          devId && devName && toHomeParamsHistory(devId, devName)
        }}
      >
        <IconImg imgName="historyRecord"></IconImg>
        <View className="flex-1 ml-10 mr-6 text-14 font-bold text-left truncate">
          历史记录
        </View>
      </CItem>
    </CItemBox>
  )
}

/**解除绑定栏 */
export const UnBindDevRow: React.FC<{
  devId?: string | number
}> = ({devId}): JSX.Element => {
  const unBindDev = () => {
    let userId = getStorage('userId')
    if (!userId) return
    if (!devId) return
    Taro.showModal({
      content: '确认解绑此设备？',
      success: res => {
        if (res.confirm) {
          uDisBindDev({devId: String(devId), userId})
            .then(res => {
              toHome()
            })
            .catch(err => {
              if (err && err.msg) {
                Taro.showModal({
                  content: err.msg || '解绑失败'
                })
              }
            })
        }
      }
    })
  }
  return (
    <Button
      className="unBindDevBtn bg-white rounded-12 overflow-hidden flex justify-center items-center"
      onClick={unBindDev}
    >
      <IconImg imgName="unBindDev"></IconImg>
      <View className="ml-10 mr-6 text-16 text-danger font-bold truncate">
        解除绑定
      </View>
    </Button>
  )
}
